<template>
  <div class="avatar origin-center"
    :style="{transform: `scale(${scale}, ${scale})`}"
  >
    <img v-if="!name" src="./default-avatar.svg"/>
    <div v-else class="avatar__name">{{ name.substring(0, 1).toUpperCase() }}</div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'ArkAvatar',
  props: {
    name: {
      type: String,
    },
    scale: {
      type: Number,
      default: 1,
    },
  },
});
</script>

<style scoped>
@reference "../../lib/tailwindcss/index.css";

.avatar__name {
  @apply min-w-[24px] min-h-[24px] h-full;
  @apply flex justify-center items-center;
  @apply rounded-full bg-gray-400 text-[#FFFFFFD8];
}
</style>